<template>
    <div class="security-tip-page">
      <div class="page-header">
        安全提示页面
      </div>
      <div class="main-content">
        <h1 class="main-title">{{ data.title }}</h1>
        <div class="content">
          <div class="preface">
            {{ data.preface }}
          </div>
          <div class="images">
            <img v-if="data.imageOne" :src="data.imageOne" alt="Image One">
          </div>
          <div class="content-text">
            {{ data.content }}
          </div>
          <div class="images">
            <img v-if="data.imageTwo" :src="data.imageTwo" alt="Image Two">
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { getTipContent } from '@/api/tip'
  import { reactive, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  
  const data = reactive({
    title: '',
    preface: '',
    content: '',
    imageOne: '', // 这里将存储从数据库获取的图片路径
    imageTwo: '',
  });
  
  const load = async () => {
    const router = useRoute()
    const res = await getTipContent(router.query.topic)
    data.title = res.data.data[0].title
    data.preface = res.data.data[0].preface
    data.content = res.data.data[0].content
    data.imageOne = res.data.data[0].imageUrlOne;
    data.imageTwo = res.data.data[0].imageUrlTwo
    console.log(data.imageOne)
  };
  
  onMounted(load)
  </script>
  
  <style scoped>
  .security-tip-page {
    font-family: 'Arial', sans-serif;
    padding: 30px;
    background-color: #f4f4f9;
    color: #333;
    max-width: 1000px; 
    margin: 0 auto; 
  }
  
  .page-header {
    font-size: 28px;
    font-weight: bold;
    color: #42b983;
    padding-bottom: 15px;
    border-bottom: 3px solid #42b983;
    text-align: center;
    margin-bottom: 30px; 
  }
  
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .main-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* 限制内容的最大宽度 */
  .content {
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 800px; 
    margin: 0 auto; 
  }
  
  .preface {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: justify;
  }
  
  .images img {
    max-width: 100%;
    height: auto;
    margin-bottom: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }
  
  /* 对齐文本 */
  .content-text {
    font-size: 18px;
    line-height: 1.8;
    text-align: justify; 
  }
  </style>